<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 在组件实例中 :属性名=“js表达式” 本质是通过props向组件传递数据（包括函数等） -->
      <HeaderComponent :todos="todos" :addTodo="addTodo"></HeaderComponent>
      <MainComponent :todos="todos" :updateIsOver="updateIsOver" :delTodo="delTodo"></MainComponent>
      <FooterComponent :todos="todos" :updateAllIsover="updateAllIsover" :clearOver="clearOver"></FooterComponent>
    </div>
  </div>
</template>

<script>

import HeaderComponent from "@/components/Header";
import MainComponent from "@/components/Main";
import FooterComponent from "@/components/Footer";


export default {
  name: "App",
  components: {
    HeaderComponent,
    MainComponent,
    FooterComponent,
  },
  data(){
    return {
      todos:[
        {id:1,content:'吃饭',isOver:true},
        {id:2,content:'睡觉',isOver:false},
        {id:3,content:'不敲代码',isOver:false},
      ]
    }
  },
  methods:{
    // 更新isOver的值
    updateIsOver(index){
      // 通过下标来修改指定的isOver
      this.todos[index].isOver = !this.todos[index].isOver
    },
    // 删除一条todo
    delTodo(index){
      // 通过下标来删除一条todo
      this.todos.splice(index,1)
    },
    // 新增一条todo
    addTodo(todo){
      // Header组件回传一个数据对象
      this.todos.unshift(todo)
    },
    // 全选和全不选
    updateAllIsover(flag){
      // Footer组件回传一个布尔值，将原数据todos中的所有isOver进行修改，将修改后返回的新数组 整个赋值给this.todos
      const newList = this.todos.map(item=>{
        item.isOver = flag
        return item
      })
      this.todos = newList
    },
    // 清除isOver为trued的todo
    clearOver(){
      const newList = this.todos.filter(item=>!item.isOver)
      this.todos = newList
    }
  }
};
</script>

<style scoped>
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
